<template>
  <el-dialog
    v-if="load"
    title="选择商品"
    v-model="visible"
    align-center
    width="1000px"
    :z-index="2000"
  >
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input
          v-model.trim="form.sku_cn_title"
          class="w-40"
          placeholder="SKU名称"
          clearable
        ></el-input>
        <el-input
          v-model.trim="form.sku"
          class="w-40"
          placeholder="系统SKU"
          clearable
        ></el-input>
        <el-input
          v-model.trim="form.custom_sku"
          class="w-40"
          placeholder="自定义SKU"
          clearable
        ></el-input>
      </template>
      <template #toolbar_btns> </template>
    </VTable>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script lang="jsx" setup>
import api from "./api";
import { ElMessage } from "element-plus";
import VImage from "@/components/Image/index.vue";
const load = ref(false);
const visible = ref(false);
const tableRef = ref();
let loadings = reactive({});
const records = ref([]);
const emit = defineEmits(["close", "uploadSku"]);
const type = ref(null);

// 打开弹窗
const open = async (val) => {
  type.value = val;
  if (!load.value) {
    load.value = true;
    await 1;
  }
  loadings = reactive({});
  visible.value = true;
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};
const handleClose = () => {
  emit("close");
};
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  height: 500,
  rowConfig: {
    height: 60,
  },
  columns: [
    { type: "checkbox", width: 50 },
    {
      title: "产品图片",
      width: 80,
      slots: {
        default: ({ row }) => {
          return (
            <div class="text-blue-500">
              <VImage src={row.attr_img} width={52} height={52}></VImage>
            </div>
          );
        },
      },
    },
    { field: "spu", title: "SPU" },
    {
      title: "SKU/自定义SKU",
      slots: {
        default: ({ row }) => {
          return (
            <div class="text-blue-500">
              <div>{row.sku}</div>
              <div>{row.custom_sku}</div>
            </div>
          );
        },
      },
    },
    { field: "sku_cn_title", title: "产品名称" },
    { field: "product_attribute", title: "属性" },
    { field: "spu_status_text", title: "商品状态", width: 80 },
    {
      title: "规格",
      width: 150,
      slots: {
        default: ({ row }) => {
          if (row.specification && row.specification.length) {
            return row.specification.map((i) => <div>{i.name}</div>);
          } else {
            return <div>--</div>;
          }
        },
      },
    },
    {
      title: "采购价",
      width: 80,
      slots: {
        default: ({ row }) => {
          return (
            <div class="text-blue-500">
              <div> ￥{row.purchase_price}</div>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page, form }) => {
        const requestFun = type.value == 1 ? api.queryCombination : api.query;
        const res = await requestFun({ ...form, ...page });
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total,
          });
        });
      },
    },
  },
});
//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords();
};
// 提交
const submit = () => {
  let list = [];
  records.value = getSelectRow();
  records.value.forEach((item) => {
    list.push({
      // id: item.id,
      spu_id: item.spu_id,
      sku: item.sku,
      sku_image: item.attr_img,
      custom_sku: item.custom_sku,
      sku_cn_title: item.sku_cn_title,
      is_main_attribute: false,
      quantity: 1,
      purchase_price: item.purchase_price,
      create_user: item.create_user,
      create_time: item.create_time,
    });
  });
  emit("uploadSku", list);
  close();
};

defineExpose({ open });
</script>
